import { getToken, setUser } from '@/utils/auth';
import { View } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';
import { Image, Button, Checkbox } from '@taroify/core';
import { imgAddPrefix, toast } from '@/utils';
import UseInput from '@/components/common/UseInput';
import { CustomTheme } from '@/context/ThemeContext';
import { useState } from 'react';
import { test, WXLoginService } from '@/api';
import { WXAppId } from '@/config';

const Login = () => {
  useLoad(() => {
    if (getToken()) Taro.switchTab({ url: '/pages/home/home' });
  });
  const [checked, setChecked] = useState(false);
  const otherLogin = [
    {
      name: '微信',
      url: '/icon/wechat.png',
      handle() {
        if (!checked) return toast('请先同意用户协议');
        if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
          Taro.login().then(({ code }) =>
            WXLoginService(code).then(res => {
              setUser(res);
              setTimeout(
                () => Taro.switchTab({ url: '/pages/home/home' }),
                2000,
              );
            }),
          );
        } else {
          const redirectUri = encodeURIComponent(window.location.href);
          const state = 'STATE'; // 可以自定义状态参数
          const scope = 'snsapi_userinfo'; // 或者 'snsapi_base'，根据需要选择
          const weChatAuthUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${WXAppId}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
          window.location.href = weChatAuthUrl;
        }
      },
    },
    {
      name: 'QQ',
      url: '/icon/qq.png',
      handle() {
        toast('QQ 登陆还没有开通，请联系开发者');
      },
    },
    {
      name: '支付宝',
      url: '/icon/alipay.png',
      handle() {
        toast('支付宝 登陆还没有开通，请联系开发者');
      },
    },
  ];
  function login() {
    if (!checked) return toast('请先同意用户协议');
    test();
  }

  return (
    <View className="flex flex-col gap-20 justify-center items-center pt-20">
      <View>
        <Image src={imgAddPrefix('/icon/index.png')} className="w-24 h-24" />
      </View>
      <View className="grid grid-cols-1 gap-3 w-11/12">
        <UseInput left="手机号：" />
        <UseInput left="验证码" type="code" />
        <Button
          variant="contained"
          color="primary"
          shape="round"
          onClick={login}
        >
          登陆
        </Button>
        <Button variant="text" color="primary">
          注册
        </Button>
        <View className="flex justify-between items-center px-8">
          <Checkbox onChange={setChecked} checked={checked}>
            用户协议
          </Checkbox>
          <View>忘记密码？</View>
        </View>
      </View>
      <View className="flex justify-center items-center gap-10">
        {otherLogin.map((item, index) => (
          <View key={index} onClick={item.handle}>
            <Image src={imgAddPrefix(item.url)} className="h-10 w-10 " />
          </View>
        ))}
      </View>
    </View>
  );
};

export default () => {
  return (
    <CustomTheme>
      <Login />
    </CustomTheme>
  );
};
